import * as echarts from 'echarts'
import { AXIS_LABEL, LEGEND, LINE_TOOLTIP, XAXIS_NAME, YAXIS_NAME } from '@/utils/chartConfig'

const calculateSize = (val = 1, defaultWidth = 1920) => {
  let nowClientWidth = document.documentElement.clientWidth
  return val * (nowClientWidth / defaultWidth)
}

export const option1 = () => {
  const xData = ['2月', '3月', '4月', '5月', '6月']
  const tq = [80, 120, 30, 49, 18]
  const tq1 = [0, 20, 30, 60, 49].map(item => ~~((item + 18) * 1.1))
  const tq2 = [12, 50, 50, 27, 49]
  return {
    // title: {
    //     text: '每月车辆违章类型占比',
    //     x: 'center',
    //     top: '15px',
    //     textStyle: {
    //         color: '#ccc',
    //         fontWeight: 500,
    //         fontSize: 18,
    //     },
    //     show: false
    // },
    legend: [
      {
        icon: 'react',
        right: '0%',
        top: '5%',
        textStyle: {
          color: '#c6dbe0',
          fontSize: 14
        },
        itemGap: 30,
        itemWidth: 30,
        itemHeight: 4,
        itemStyle: {
          // color: ['#64BDFF', '#fff', '#fff',]
        },
        data: ['已处理', '未处理', '处理率']
      }
    ],
    grid: {
      top: '25%',
      left: '3%',
      right: '0%',
      bottom: '0%',
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      backgroundColor: 'rgba(0,0,0,0.6)',
      borderColor: 'rgba(0,0,0,0)',

      textStyle: {
        color: '#fff'
      },

      axisPointer: {
        lineStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(0, 255, 233,0)'
              },
              {
                offset: 0.5,
                color: 'rgba(255, 255, 255,1)'
              },
              {
                offset: 1,
                color: 'rgba(0, 255, 233,0)'
              }
            ],
            global: false
          }
        }
      }
    },
    xAxis: [
      {
        type: 'category',
        axisLine: {
          show: true,
          color: '#aaa'
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#fff',
          width: 100
        },
        splitLine: {
          show: false
        },
        boundaryGap: true,
        data: xData
      }
    ],

    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed', //虚线
            color: '#00BFF3',
            opacity: 0.3
          }
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          margin: 20,
          color: '#fff'
        },
        axisTick: {
          show: false
        }
      },
      {
        type: 'value',
        position: 'right',
        axisLabel: {
          formatter: '{value}%', //使图变成百分比形式
          color: '#ccc'
        },
        splitLine: {
          //网格线显不显示
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '已处理',
        type: 'bar',
        stack: '总量',
        barMaxWidth: 16,
        barGap: '10%',
        data: tq.map((item, index) => {
          return {
            value: item,
            itemStyle: {
              borderRadius: 0,
              // color: 'rgba(255, 255, 255, 0.32)',
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#64BDFF'
                  },
                  // {
                  //   offset: 0.2,
                  //   color: "rgba(255,255,255,0.7)"
                  // },
                  // {
                  //   offset: 0.5,
                  //   color: "rgba(255,255,255,0.5)"
                  // },
                  {
                    offset: 1,
                    color: 'rgba(105,108,255,0.00)'
                  }
                ],
                false
              )
            }
          }
        })
      },
      {
        name: '未处理',
        type: 'bar',
        stack: 'bb',
        barMaxWidth: 16,
        barGap: '10%',
        data: tq2.map((item, index) => {
          return {
            value: item,
            itemStyle: {
              borderRadius: 0,
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#FF8252'
                  },
                  // {
                  //     offset: 0.2,
                  //     color: "rgba(255,255,255,0.7)"
                  // },
                  // {
                  //   offset: 0.5,
                  //   color: "rgba(255,255,255,0.5)"
                  // },
                  {
                    offset: 1,
                    color: 'rgba(105,193,255,0.5)'
                  }
                ],
                false
              )
              // color: 'rgba(221, 157, 106, 0.2)',
              // borderWidth: 1,
              // borderColor: 'rgba(221, 157, 106, 1)'
            }
          }
        })
      },
      {
        name: '处理率',
        type: 'line',
        data: tq1,
        symbolSize: 10,
        symbol: 'circle',
        lineStyle: {
          color: 'rgba(255,255,255,0.5)'
        },

        itemStyle: {
          color: '#fff',
          borderColor: 'rgba(255, 255, 255, .3)',
          borderWidth: 15
        }
      }
    ]
  }
}

export const option2 = () => {
  return {
    title: {
      textStyle: {
        align: 'center',
        color: '#fff',
        fontSize: 20
      },
      top: '3%',
      left: '20%'
    },
    grid: {
      top: '20%'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        label: {
          show: true
        }
      }
    },
    legend: {
      data: ['柱状表示'],
      top: '15%',
      textStyle: {
        color: '#ffffff'
      }
    },
    xAxis: {
      data: ['1月', '2月', '3月', '4月', '5月'],
      axisLine: {
        show: true,
        lineStyle: {
          color: '#acb5db'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#acb5db'
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '个',
        nameTextStyle: {
          color: '#acb5db'
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#FFFFFF'
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#acb5db'
          }
        }
      }
    ],
    series: [
      {
        name: 'mg/m³',
        type: 'bar',
        barWidth: 15,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#4d66d14d'
              },
              {
                offset: 1,
                color: '#4d66d1'
              }
            ])
          }
        },
        data: [42, 38, 48, 35, 29]
      }
    ]
  }
}

export const option3 = () => {
  function _pie3() {
    const dataArr = []
    for (let i = 0; i < 100; i++) {
      if (i % 2 === 0) {
        dataArr.push({
          name: (i + 1).toString(),
          value: 25,
          itemStyle: {
            color: 'rgb(126,190,255)',
            borderWidth: 0,
            borderColor: 'rgba(0,0,0,0)'
          }
        })
      } else {
        dataArr.push({
          name: (i + 1).toString(),
          value: 20,
          itemStyle: {
            color: 'rgba(0,0,0,0)',
            borderWidth: 0,
            borderColor: 'rgba(0,0,0,0)'
          }
        })
      }
    }
    return dataArr
  }
  return {
    color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9'],
    grid: {
      left: '10%',
      top: '10%',
      bottom: '10%',
      right: '10%',
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)'
    },
    legend: {
      type: 'scroll',
      top: '5%',
      right: '15%',
      itemWidth: 16,
      itemHeight: 16,
      itemGap: 6,
      textStyle: {
        color: '#A3E2F4',
        fontSize: 12,
        fontWeight: 0
      },
      data: ['私家轿车', '自行车', '货车', '出租车', '电动车']
    },
    polar: {},
    angleAxis: {
      interval: 1,
      type: 'category',
      data: [],
      z: 10,
      axisLine: {
        show: false,
        lineStyle: {
          color: '#0B4A6B',
          width: 1,
          type: 'solid'
        }
      },
      axisLabel: {
        interval: 0,
        show: true,
        color: '#0B4A6B',
        margin: 8,
        fontSize: 16
      }
    },
    radiusAxis: {
      min: 40,
      max: 120,
      interval: 20,
      axisLine: {
        show: false,
        lineStyle: {
          color: '#0B3E5E',
          width: 1,
          type: 'solid'
        }
      },
      axisLabel: {
        formatter: '{value} %',
        show: false,
        padding: [0, 0, 20, 0],
        color: '#0B3E5E',
        fontSize: 16
      },
      splitLine: {
        lineStyle: {
          color: '#0B3E5E',
          width: 0,
          type: 'solid'
        }
      }
    },
    calculable: true,
    series: [
      {
        type: 'pie',
        radius: ['5%', '10%'],
        center: ['50%', '70%'],
        tooltip: {
          show: false
        },
        emphasis: {
          scale: false,
          labelLine: {
            show: false
          }
        }, //鼠标经过的特效
        labelLine: {
          show: false,
          length: 30,
          length2: 55
        },
        data: [
          {
            name: '',
            value: 0,
            itemStyle: {
              color: '#0B4A6B'
            }
          }
        ]
      },
      {
        type: 'pie',
        // zlevel: 2,
        silent: true,
        radius: ['65%', '64%'],
        center: ['50%', '65%'],
        tooltip: {
          show: false
        },
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: _pie3()
      },
      {
        type: 'pie',
        // zlevel: 2,
        silent: true,
        radius: ['42%', '47%'],
        center: ['50%', '65%'],
        tooltip: {
          show: false
        },
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: _pie3()
      },
      {
        type: 'pie',
        radius: ['65%', '70%'],
        center: ['50%', '65%'],
        tooltip: {
          show: false
        },
        emphasis: {
          scale: false,
          labelLine: {
            show: false
          }
        }, //鼠标经过的特效
        labelLine: {
          show: false,
          length: 30,
          length2: 55
        },
        name: '',
        data: [
          {
            name: '',
            value: 0,
            itemStyle: {
              color: '#0B4A6B'
            }
          }
        ]
      },
      {
        stack: 'a',
        type: 'pie',
        radius: ['20%', '55%'],
        center: ['50%', '65%'],
        roseType: 'area',
        zlevel: 10,
        label: {
          show: true,
          formatter: '{c}',
          fontSize: 12,
          color: '#c6dbe0',
          position: 'outside'
        },
        emphasis: {
          show: true,
          labelLine: {
            show: true
          }
        },

        labelLine: {
          show: true,
          length: 20,
          length2: 20
        },
        data: [
          {
            value: 2305,
            name: '私家轿车'
          },
          {
            value: 1560,
            name: '自行车'
          },
          {
            value: 1260,
            name: '货车'
          },
          {
            value: 1569,
            name: '出租车'
          },
          {
            value: 3650,
            name: '电动车'
          }
        ]
      }
    ]
  }
}
export const option4 = () => {
  const dataMax = 90

  const loaddata = [84, 78, 86, 42, 55, 67]
  return {
    // backgroundColor: 'rgba(0,0,0,.5)',
    legend: {
      show: true,
      type: 'plain'
    },
    tooltip: {
      show: true,
      backgroundColor: 'rgba(0, 0, 0,0.3)',
      textStyle: {
        color: '#fff',
        fontSize: calculateSize(12)
      }
    },
    radar: {
      radius: '60%', //占整个屏幕百分比
      center: ['50%', '54%'], //中心位于屏幕左上角偏移量
      startAngle: 90, //旋转角度
      triggerEvent: true,
      axisName: {
        color: '#fff',
        fontSize: calculateSize(14),
        borderRadius: calculateSize(3),
        padding: [calculateSize(20), calculateSize(5)]
      },
      axisNameGap: calculateSize(3),
      indicator: [
        { name: '车间1', max: dataMax },
        { name: '车间2', max: dataMax },
        { name: '车间3', max: dataMax },
        { name: '车间4', max: dataMax },
        { name: '车间5', max: dataMax },
        { name: '车间6', max: dataMax }
      ],
      splitArea: {
        areaStyle: {
          // color: ['rgba(250, 211, 105,0.2)', 'rgba(250, 211, 105,0.8)'].reverse(),
          color: '#385172',
          shadowBlur: calculateSize(30),
          shadowOffsetX: calculateSize(10),
          shadowOffsetY: calculateSize(10)
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(247, 217, 0, 0.9)'
        }
      },
      splitLine: {
        lineStyle: {
          width: 1,
          color: ['rgba(247, 217, 0, 0.1)', 'rgba(247, 217, 0, 0.2)', 'rgba(247, 217, 0, 0.3)', 'rgba(247, 217, 0, 0.4)', 'rgba(247, 217, 0, 0.5)', 'rgba(247, 217, 0, 0.6)'].reverse()
        }
      }
    },
    series: [
      {
        name: '车间分布',
        type: 'radar', //雷达图
        symbol: 'circle',
        symbolSize: 5,
        emphasis: {
          itemStyle: {
            color: 'rgba(55, 74, 100,0.5)',
            borderWidth: 20
          }
        },
        lineStyle: {
          color: 'rgba(255, 214, 98, 0.1)',
          width: 2
        },
        label: {
          show: false
        },
        areaStyle: {
          width: 1,
          opacity: 0.5,
          shadowColor: 'rgba(0, 0, 0, .5)',
          shadowBlur: 3, //虚影模糊度

          color: 'rgba(74, 138, 226)'
        },
        data: [loaddata]
      }
    ]
  }
}

// 设备故障趋势
export const option5 = {
  tooltip: LINE_TOOLTIP,
  legend: {
    icon: 'rect',
    // itemWidth: 48,
    // itemHeight: 12,
    itemGap: 20,
    left: 'right',
    top: '3%',
    textStyle: LEGEND,
    data: [
      {
        name: 'mg/m³口流出',
        icon: 'rect'
        // itemStyle: {
        //   color: "#2D98FF",
        // },
      },
      {
        name: 'mg/m³口流入',
        icon: 'rect'
        // itemStyle: {
        //   color: "#FF9433",
        // },
      }
    ]
  },
  grid: {
    top: '30%',
    left: '0%',
    right: '8%',
    bottom: '0%',
    containLabel: true
  },
  color: ['#FF9433', '#2D98FF'],
  xAxis: {
    type: 'category',
    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
    name: '(月)',
    nameTextStyle: {
      ...XAXIS_NAME
    },
    axisLabel: AXIS_LABEL,
    axisLine: {
      show: true
    },
    splitLine: {
      //网格线
      lineStyle: {
        color: '#6e717e',
        type: 'dotted' //设置网格线类型 dotted：虚线   solid:实线
      },
      show: false //隐藏或显示
    }
  },
  yAxis: {
    type: 'value',
    name: '(mg/m³)',
    offset: -5,
    max: 100,
    axisLine: {
      show: true
    },
    axisLabel: AXIS_LABEL,
    // data:[100,200,300,400],
    nameTextStyle: {
      ...YAXIS_NAME
    },
    splitLine: {
      //网格线
      lineStyle: {
        color: '#6e717e',
        type: 'dotted' //设置网格线类型 dotted：虚线   solid:实线
      },
      show: false //隐藏或显示
    }
  },
  series: [
    {
      name: 'mg/m³口流出',
      type: 'line',
      data: [60, 55, 60, 65, 70, 80, 64, 80, 60, 85, 60, 80, 64],
      smooth: true,
      symbol: 'none',
      lineStyle: {
        // color: "#2D98FF",
        width: '2'
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0.5, color: 'rgba(45, 152, 255, 0.2)' }, // 0% 处的颜色
            { offset: 1, color: ' RGB(36,46,70)' }
          ])
        }
      },
      markPoint: {
        symbol: 'circle',
        symbolSize: 0,
        itemStyle: {
          color: '#fff'
        },
        label: {
          show: false
        },
        data: [
          {
            type: 'max',
            name: '最大值'
          },
          {
            type: 'min',
            name: '最小值'
          }
        ]
      }
    },
    {
      name: 'mg/m³口流入',
      type: 'line',
      data: [40, 35, 40, 45, 50, 60, 44, 60, 40, 65, 40, 60, 44],
      smooth: true,
      symbol: 'none',
      lineStyle: {
        // color: "#FF9433",
        width: '2'
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0.5, color: 'rgba(255,148,51,0.2)' }, // 0% 处的颜色
            { offset: 1, color: 'rgba(255,148,51,0.40)' }
          ])
        }
      },
      markPoint: {
        symbol: 'circle',
        symbolSize: 0,
        itemStyle: {
          color: '#fff'
        },
        label: {
          show: false
        },
        data: [
          {
            type: 'max',
            name: '最大值'
          },
          {
            type: 'min',
            name: '最小值'
          }
        ]
      }
    }
  ]
}

//违规分类
export const option6 = () => {
  return {
    textStyle: {
      fontSize: calculateSize(14)
    },
    legend: {
      icon: 'rect',
      itemWidth: calculateSize(20),
      itemHeight: calculateSize(10),
      itemGap: calculateSize(20),
      left: 'center',
      top: '6%',
      data: [
        {
          name: '微型车',
          icon: 'rect',
          itemStyle: {
            // color: "#2D98FF",
          },
          textStyle: {
            color: '#FFFFFF'
          }
        },
        {
          name: '小型车',
          icon: 'path://M6 5L8 5L8 6L6 6ZM9 5L11 5L11 6L9 6ZM12 5L14 5L14 6L12 6Z',
          itemStyle: {
            // color: "#2D98FF",
          },
          textStyle: {
            color: '#FFFFFF'
          }
        },
        {
          name: '中型车',
          icon: 'rect',
          itemStyle: {
            // color: "#FF9433",
          },
          textStyle: {
            color: '#FFFFFF'
          }
        },
        {
          name: '大型车',
          icon: 'path://M6 5L8 5L8 6L6 6ZM9 5L11 5L11 6L9 6ZM12 5L14 5L14 6L12 6Z',
          itemStyle: {
            // color: "#FF9433",
          },
          textStyle: {
            color: '#FFFFFF'
          }
        }
      ]
    },
    grid: {
      top: '35%',
      left: '5%',
      right: '8%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      name: '(月)',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#FFFFFF'
        }
      },
      splitLine: {
        //网格线
        lineStyle: {
          color: '#6e717e',
          type: 'dotted' //设置网格线类型 dotted：虚线   solid:实线
        },
        show: false //隐藏或显示
      }
    },
    yAxis: {
      type: 'value',
      name: '(次)',
      offset: -5,
      max: 70,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#FFFFFF'
        }
      },
      splitLine: {
        //网格线
        lineStyle: {
          color: '#6e717e',
          type: 'dotted' //设置网格线类型 dotted：虚线   solid:实线
        },
        show: false //隐藏或显示
      }
    },
    color: ['rgb(30,137,154)', 'rgb(28,89,129)', 'rgb(45,152,255)', 'rgb(118,124,255)'],
    series: [
      {
        name: '微型车',
        type: 'line',
        data: [50, 45, 50, 55, 60, 70, 54, 70, 50, 70, 50, 54],
        smooth: true,
        symbol: 'none',
        lineStyle: {
          color: 'rgb(30,137,154)',
          width: calculateSize(3)
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0.5, color: 'rgba(45, 152, 255, 0.2)' }, // 0% 处的颜色
            { offset: 1, color: ' RGB(36,46,70)' }
          ])
        },
        markPoint: {
          symbol: 'circle',
          symbolSize: 0,
          itemStyle: {
            color: 'rgb(28,89,129)'
          },
          label: {
            show: false
          },
          data: [
            {
              type: 'max',
              name: '最大值'
            },
            {
              type: 'min',
              name: '最小值'
            }
          ]
        }
      },
      {
        name: '小型车',
        type: 'line',
        data: [30, 25, 30, 35, 40, 50, 34, 50, 30, 55, 30, 54],
        smooth: true,
        symbol: 'none',
        lineStyle: {
          color: 'rgb(45,152,255)',
          width: calculateSize(3),
          type: 'dashed'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0.5, color: 'rgba(45, 152, 255, 0.2)' }, // 0% 处的颜色
            { offset: 1, color: ' RGB(36,46,70)' }
          ])
        },
        markPoint: {
          symbol: 'circle',
          symbolSize: 0,
          itemStyle: {
            color: '#fff'
          },
          label: {
            show: false
          },
          data: [
            {
              type: 'max',
              name: '最大值'
            },
            {
              type: 'min',
              name: '最小值'
            }
          ]
        }
      },
      {
        name: '中型车',
        type: 'line',
        data: [45, 38, 44, 52, 53, 65, 50, 60, 40, 65, 46, 54],
        smooth: true,
        symbol: 'none',
        lineStyle: {
          color: 'rgb(118,124,255)',
          width: 2
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0.5, color: 'rgba(255,148,51,0.2)' }, // 0% 处的颜色
            { offset: 1, color: 'rgba(255,148,51,0.40)' }
          ])
        },
        markPoint: {
          symbol: 'circle',
          symbolSize: 0,
          itemStyle: {
            color: '#fff'
          },
          label: {
            show: false
          },
          data: [
            {
              type: 'max',
              name: '最大值'
            },
            {
              type: 'min',
              name: '最小值'
            }
          ]
        }
      },
      {
        name: '大型车',
        type: 'line',
        data: [29, 12, 20, 52, 23, 48, 30, 31, 18, 45, 22, 23],
        smooth: true,
        symbol: 'none',
        lineStyle: {
          color: 'rgb(118,124,255)',
          width: 2,
          type: 'dashed'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0.5, color: 'rgba(75, 188, 125,0.6)' }, // 0% 处的颜色
            { offset: 1, color: 'rgba(75, 188, 125,1)' }
          ])
        },
        markPoint: {
          symbol: 'circle',
          symbolSize: 0,
          itemStyle: {
            color: '#fff'
          },
          label: {
            show: false
          },
          data: [
            {
              type: 'max',
              name: '最大值'
            },
            {
              type: 'min',
              name: '最小值'
            }
          ]
        }
      }
    ]
  }
}
